<!-- ========= -->
<!-- = Style = -->
<!-- ========= -->
<style>

#searchPanel {
	background: black url(http://warcache.googlecode.com/hg/front_page_back.png) no-repeat; 
	width: 1041px;
	height: 600px;
	text-align: left;
}

#filter {  
	margin:	0; padding: 0; border: none; 
	position: absolute; left: 440px; top: 260px;
	background: red;
	color: white;
	font: verdana;
	font-size: 18px;
	width: 200px;
}

#searchMenu {  
	margin:0; padding: 0; border: none; 
	position: absolute; left: 360px; top: 324px;
	background: transparent;
	width: 340px;
	text-align: center;
	color: red;
}

</style> 

<!-- ========== -->
<!-- = Script = -->
<!-- ========== -->
<script type="text/javascript">

// called after libraries are loaded
function searchInit() {

	$( "#filter" ).autocomplete({

		// called after the input box changes (and is greater than minLength characters)
		source: function( request, response ) {
			
			// create a tablequery to search a google docs spreadsheet	
			// A = abilityId, O = english name for ability
			// TODO internationalisation
			var query = new google.visualization.Query(dataSourceUrl);
			query.setQuery("select A, Q where lower(Q) matches '"+request.term.toLowerCase()+".*'");

			// performs the query against the google docs spreadsheet
			query.send(
				// populats the drop-down
				function(data) {
					dataTable = data.getDataTable();
					response( $.ui.autocomplete.filter(dataTable.getDistinctValues(1), request.term) );
				}
			);
		},

		// called when a drop down match is selected
		select: function( event, ui ) {  
			var abilityId = 0; 
			for(x=0; x<dataTable.getDistinctValues(1).length; x++) {
				var name = dataTable.getValue(x, 1);
				if(name==ui.item.value) {
					abilityId = dataTable.getValue(x, 0);
					break;
				}
			}
			switchPanel('detail');
			detailUpdate(abilityId);
		},

		// we only want to autocomplete when 2 or more characters are entered
		minLength: 2

	});

	// enable filter input
	$('#filter').val('');
	$('#filter').removeAttr("disabled"); 

}

/**
 * Called when the user switches to this page
 */
function searchSwitch() {
	// clean out filter field
	$('#filter').val('');
}

</script>

<!-- ======== -->
<!-- = HTML = -->
<!-- ======== -->
<div id="searchPanel" class="panel">
	<input type="text" id="filter" disabled="disabled" />
	<div id="searchMenu">
		<span class="menuItem" title="Search" onclick="switchPanel('search')">SEARCH</span> | 
		<span class="menuItem" title="Abilities Listing and Filtering" onclick="switchPanel('listing')">ABILITIES</span> | 
		<span class="menuItem" title="Career and Renown Buidler" onclick="switchPanel('builder')">BUILDER</span> | 
		<span class="menuItem" title="Information about WarCache" onclick="switchPanel('about')">ABOUT</span>  
	</div>
</div>
